<html>
<head>
    <title>滨江台风号</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            width: 1010;
            height: 50 padding : 0 px;
            margin: 5px;
            background-image: url('./beijing.png');

        }

        #main {
            background-color: rgba(255, 255, 255, 0.4);
            color: white;
            width: 1010;
            height: 1400;
            font-size: x-large;
            font-weight: bold;
            text-align: center;
            font-family: cursive, 楷体;

        }

        #first {
            background: rgba(0, 128, 255, 0.6);
            width: 200;
            height: 200;
            font-size: x-large;
            font-weight: bold;
            text-align: center;
            color: white;
            font-family: cursive, 楷体;
            border-style: solid;
            border-width: 1px;
            border-color: white;

        }

        #second {
            background: rgba(0, 128, 255, 0.6);
            width: 200;
            height: 200;
            font-size: x-large;
            font-weight: bold;
            text-align: center;
            color: white;
            font-family: cursive, 黑体;
            border-style: solid;
            border-width: 1px;
            border-color: white;
        }

        #third {
            background: rgba(0, 128, 255, 0.6);
            width: 200;
            height: 200;
            font-size: x-large;
            font-weight: bold;
            text-align: center;
            color: white;
            font-family: cursive, 黑体;
            border-style: solid;
            border-width: 1px;
            border-color: white;

        }

        #forth {
            background: rgba(0, 128, 255, 0.6);
            width: 200;
            height: 200;
            font-size: x-large;
            font-weight: bold;
            text-align: center;
            color: white;
            font-family: cursive, 黑体;
            border-style: solid;
            border-width: 1px;
            border-color: white;
        }

        #fifth {
            background: rgba(0, 128, 255, 0.6);
            width: 200;
            height: 200;
            font-size: x-large;
            font-weight: bold;
            text-align: center;
            color: white;
            font-family: cursive, 黑体;
            border-style: solid;
            border-width: 1px;
            border-color: white;
        }

        .btn1 {
            width: 200px;
            height: 200px;
            line-height: 18px;
            font-size: 18px;
            background: url("btn_time.png") no-repeat center;
            
            padding-bottom: 1px
        }
        
          .btn2 {
            width: 200px;
            height: 200px;
            line-height: 18px;
            font-size: 18px;
            background: url("btn_lv.png") no-repeat center;
            color: #FFF;
            padding-bottom: 1px
        }
        
          .btn3 {
            width: 200px;
            height: 200px;
            line-height: 18px;
            font-size: 18px;
            background: url("btn_are.png") no-repeat left top;
            color: #FFF;
            padding-bottom: 1px
        }
        
          .btn4 {
            width: 200px;
            height: 200px;
            line-height: 18px;
            font-size: 18px;
            background: url("btn_name.png") no-repeat center;
            color: #FFF;
            padding-bottom: 1px
        }
        
          .btn5 {
            width: 200px;
            height: 200px;
            line-height: 18px;
            font-size: 18px;
            background: url("btn_detail.png") no-repeat center;
            color: #FFF;
            padding-bottom: 1px
        }
    </style>

</head>
<body>
<div>
    <div id="first" style="float: left;">
        <form action="./yearSearch.php" target="mainFrame">
            <div id="button">
                <input type="submit" value="" style="font-size: 2em;" class="btn1">
            </div>
        </form>
    </div>
    <div id="second" style="float: left;">
        <form action="./levelSearch.php" target="mainFrame">
            <div id="button">
                <input type="submit" value="" style="font-size: 2em;" class="btn2">
            </div>
        </form>
    </div>
    <div id="third" style="float: left;">
        <form action="./areaSearch.php">
            <div id="button">
                <input type="submit" value="" style="font-size: 2em;" class="btn3">
            </div>
        </form>
    </div>
    <div id="forth" style="float: left;">
        <form action="./nameSearch.php" target="mainFrame">
            <div id="button">
                <input type="submit" value="" style="font-size: 2em;" class="btn4">
            </div>
        </form>
    </div>
    <div id="fifth" style="float: left;">
        <form action="./tempSearch.php" target="mainFrame">
            <div id="button">
                <input type="submit" value="" style="font-size: 2em;" class="btn5">
            </div>
        </form>
    </div>
</div>
</body>
<iframe id="main" name="mainFrame" src="./welcome.php">test</iframe>


</html>